<!-- UserCenter.vue - 用户中心页 -->
<template>
  <div class="user-center-page">
    <!-- 用户信息卡片 -->
    <el-card class="user-info-card" shadow="hover">
      <div class="user-header">
        <div class="avatar-section">
          <el-avatar :size="100" class="user-avatar">
            <el-icon size="50"><User /></el-icon>
          </el-avatar>
        </div>
        <div class="user-details">
          <h2 class="user-name">{{ userInfo.nickName || userInfo.username }}</h2>
          <p class="user-id">
            <el-icon><User /></el-icon>
            用户ID: {{ userInfo.user_id }}
          </p>
          <p class="join-time">
            <el-icon><Clock /></el-icon>
            加入时间：{{ formatDate(userInfo.createdAt) }}
          </p>
        </div>
        <el-button type="primary" size="large" @click="showEditDialog = true">
          <el-icon><Edit /></el-icon>
          编辑资料
        </el-button>
      </div>
    </el-card>

    <!-- 统计数据 -->
    <div class="stats-section">
      <el-row :gutter="20">
        <el-col :xs="12" :sm="6">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-content">
              <el-icon class="stat-icon" color="#409eff"><ShoppingCart /></el-icon>
              <div class="stat-info">
                <p class="stat-value">{{ stats.orderCount }}</p>
                <p class="stat-label">我的订单</p>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="12" :sm="6">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-content">
              <el-icon class="stat-icon" color="#67c23a"><Box /></el-icon>
              <div class="stat-info">
                <p class="stat-value">{{ stats.productCount }}</p>
                <p class="stat-label">我的发布</p>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="12" :sm="6">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-content">
              <el-icon class="stat-icon" color="#ff9900"><Star /></el-icon>
              <div class="stat-info">
                <p class="stat-value">{{ stats.favoriteCount }}</p>
                <p class="stat-label">我的收藏</p>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="12" :sm="6">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-content">
              <el-icon class="stat-icon" color="#f56c6c"><Wallet /></el-icon>
              <div class="stat-info">
                <p class="stat-value">{{ stats.totalAmount.toFixed(2) }}元</p>
                <p class="stat-label">累计消费</p>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="12" :sm="6">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-content">
              <el-icon class="stat-icon" color="#e6a23c"><ChatDotRound /></el-icon>
              <div class="stat-info">
                <p class="stat-value">{{ stats.postCount }}</p>
                <p class="stat-label">我的帖子</p>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="12" :sm="6">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-content">
              <el-icon class="stat-icon" color="#67c23a"><Star /></el-icon>
              <div class="stat-info">
                <p class="stat-value">{{ stats.postLikes }}</p>
                <p class="stat-label">获得点赞</p>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="12" :sm="6">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-content">
              <el-icon class="stat-icon" color="#409eff"><View /></el-icon>
              <div class="stat-info">
                <p class="stat-value">{{ stats.postViews }}</p>
                <p class="stat-label">帖子浏览</p>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 快捷入口 -->
    <el-card class="quick-links-card">
      <template #header>
        <div class="card-header">
          <h3>快捷入口</h3>
        </div>
      </template>
      <el-row :gutter="20">
        <el-col :xs="12" :sm="6" :md="4" v-for="link in quickLinks" :key="link.path">
          <div class="quick-link-item" @click="navigateTo(link.path)">
            <el-icon :size="32" :color="link.color">
              <component :is="link.icon" />
            </el-icon>
            <p class="link-label">{{ link.label }}</p>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 最近订单 -->
    <el-card class="recent-orders-card">
      <template #header>
        <div class="card-header">
          <h3>最近订单</h3>
          <el-button type="text" @click="navigateTo('/gear/buying')">
            查看全部 <el-icon><ArrowRight /></el-icon>
          </el-button>
        </div>
      </template>
      
      <div v-if="loadingOrders" class="loading-container">
        <el-skeleton :rows="3" animated />
      </div>

      <el-empty v-else-if="recentOrders.length === 0" description="暂无订单记录" />

      <div v-else class="orders-list">
        <div
          class="order-item"
          v-for="order in recentOrders"
          :key="order.id"
          @click="viewOrderDetail(order.id)"
        >
          <div class="order-info">
            <el-image
              :src="getOrderImage(order)"
              class="order-img"
              fit="cover"
            />
            <div class="order-details">
              <h4 class="order-title">{{ order.productName || '商品名称' }}</h4>
              <p class="order-no">订单号: {{ order.code }}</p>
              <p class="order-time">{{ formatDate(order.createTime) }}</p>
            </div>
          </div>
          <div class="order-status">
            <el-tag :type="getStatusType(order.status)">
              {{ getStatusText(order.status) }}
            </el-tag>
            <p class="order-price">{{ order.totalAmount.toFixed(2) }}元</p>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 最近发表的帖子 -->
    <el-card class="recent-posts-card">
      <template #header>
        <div class="card-header">
          <h3>最近发表</h3>
          <el-button type="text" @click="navigateTo('/community/myPresentation')">
            查看全部 <el-icon><ArrowRight /></el-icon>
          </el-button>
        </div>
      </template>
      
      <div v-if="loadingPosts" class="loading-container">
        <el-skeleton :rows="3" animated />
      </div>

      <el-empty v-else-if="recentPosts.length === 0" description="暂无发表记录" />

      <div v-else class="posts-list">
        <div
          class="post-item"
          v-for="post in recentPosts"
          :key="post.id"
          @click="viewPost(post.id)"
        >
          <div class="post-info">
            <h4 class="post-title">{{ post.title }}</h4>
            <p class="post-content">{{ post.content.substring(0, 100) }}{{ post.content.length > 100 ? '...' : '' }}</p>
            <div class="post-meta">
              <el-tag :type="getCategoryType(post.category)" size="small">
                {{ getCategoryName(post.category) }}
              </el-tag>
              <span class="post-time">{{ formatDate(post.createTime) }}</span>
            </div>
          </div>
          <div class="post-stats">
            <div class="stat-item">
              <el-icon><View /></el-icon>
              <span>{{ post.viewCount || 0 }}</span>
            </div>
            <div class="stat-item">
              <el-icon><Star /></el-icon>
              <span>{{ post.likeCount || 0 }}</span>
            </div>
            <div class="stat-item">
              <el-icon><ChatRound /></el-icon>
              <span>{{ post.commentCount || 0 }}</span>
            </div>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 编辑资料对话框 -->
    <el-dialog
      v-model="showEditDialog"
      title="编辑个人资料"
      width="500px"
      :close-on-click-modal="false"
    >
      <el-form ref="editFormRef" :model="editForm" :rules="editRules" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="editForm.username" disabled />
        </el-form-item>
        <el-form-item label="昵称" prop="nickName">
          <el-input 
            v-model="editForm.nickName" 
            placeholder="请输入昵称（2-20个字符）"
            maxlength="20"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="旧密码" prop="oldPassword">
          <el-input
            v-model="editForm.oldPassword"
            type="password"
            placeholder="留空表示不修改密码"
            show-password
          />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input
            v-model="editForm.newPassword"
            type="password"
            placeholder="请输入新密码（至少6位）"
            show-password
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showEditDialog = false">取消</el-button>
        <el-button type="primary" @click="handleSaveProfile" :loading="saving">
          保存
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { userAPI, orderAPI, productAPI, favoriteAPI, postAPI } from '@/api'
import {
  User,
  Edit,
  Clock,
  ShoppingCart,
  Box,
  Star,
  Wallet,
  ArrowRight,
  ShoppingBag,
  Sell,
  CollectionTag,
  DataAnalysis,
  Setting,
  ChatDotRound,
  Document,
  View,
  ChatDotRound as ChatRound
} from '@element-plus/icons-vue'

export default {
  name: 'UserCenter',
  components: {
    User,
    Edit,
    Clock,
    ShoppingCart,
    Box,
    Star,
    Wallet,
    ArrowRight,
    ShoppingBag,
    Sell,
    CollectionTag,
    DataAnalysis,
    Setting,
    ChatDotRound,
    Document,
    View,
    ChatRound
  },
  setup() {
    const router = useRouter()

    // 用户信息
    const userInfo = ref({
      user_id: '',
      username: '',
      nickName: '',
      createdAt: ''
    })

    // 统计数据
    const stats = reactive({
      orderCount: 0,
      productCount: 0,
      favoriteCount: 0,
      totalAmount: 0,
      // 社区相关统计
      postCount: 0,
      postLikes: 0,
      postComments: 0,
      postViews: 0
    })

    // 最近订单
    const recentOrders = ref([])
    const loadingOrders = ref(false)
    
    // 最近发表的帖子
    const recentPosts = ref([])
    const loadingPosts = ref(false)

    // 编辑资料
    const showEditDialog = ref(false)
    const saving = ref(false)
    const editFormRef = ref()
    const editForm = reactive({
      username: '',
      nickName: '',
      oldPassword: '',
      newPassword: ''
    })

    // 表单验证规则
    const editRules = {
      nickName: [
        { required: true, message: '请输入昵称', trigger: 'blur' },
        { min: 2, max: 20, message: '昵称长度在2到20个字符之间', trigger: 'blur' },
        { pattern: /^[\u4e00-\u9fa5a-zA-Z0-9_\s]+$/, message: '昵称只能包含中文、英文、数字、下划线和空格', trigger: 'blur' }
      ],
      oldPassword: [
        { 
          validator: (rule, value, callback) => {
            if (editForm.newPassword && !value) {
              callback(new Error('修改密码时必须输入旧密码'))
            } else {
              callback()
            }
          }, 
          trigger: 'blur' 
        }
      ],
      newPassword: [
        { 
          validator: (rule, value, callback) => {
            if (editForm.oldPassword && !value) {
              callback(new Error('修改密码时必须输入新密码'))
            } else if (value && value.length < 6) {
              callback(new Error('新密码长度至少6位'))
            } else {
              callback()
            }
          }, 
          trigger: 'blur' 
        }
      ]
    }

    // 快捷入口
    const quickLinks = ref([
      { label: '我的订单', path: '/gear/buying', icon: 'ShoppingBag', color: '#409eff' },
      { label: '我的发布', path: '/gear/selling', icon: 'Sell', color: '#67c23a' },
      { label: '我的收藏', path: '/gear/favorites', icon: 'CollectionTag', color: '#ff9900' },
      { label: '购物车', path: '/gear/cart', icon: 'ShoppingCart', color: '#f56c6c' },
      { label: '渔具市场', path: '/gear/market', icon: 'ShoppingBag', color: '#409eff' },
      { label: '鱼类大全', path: '/fish', icon: 'DataAnalysis', color: '#67c23a' },
      { label: '社区首页', path: '/community/CommunityHome', icon: 'ChatDotRound', color: '#e6a23c' },
      { label: '我的发表', path: '/community/myPresentation', icon: 'Document', color: '#909399' }
    ])

    // 获取用户信息
    const fetchUserInfo = async () => {
      try {
        console.log('UserCenter: 开始获取用户信息')
        const response = await userAPI.getUserInfo()
        console.log('UserCenter: 用户信息响应:', response)
        if (response.code === 0 && response.data) {
          console.log('UserCenter: 用户数据:', response.data)
          userInfo.value = response.data
          editForm.username = response.data.username
          editForm.nickName = response.data.nickName
          console.log('UserCenter: 更新后的userInfo:', userInfo.value)
          console.log('UserCenter: 更新后的editForm:', editForm)
        }
      } catch (err) {
        console.error('获取用户信息失败:', err)
      }
    }

    // 获取统计数据
    const fetchStats = async () => {
      try {
        // 获取订单统计
        const ordersResponse = await orderAPI.getMyOrders()
        if (ordersResponse.code === 0 && Array.isArray(ordersResponse.data)) {
          stats.orderCount = ordersResponse.data.length
          stats.totalAmount = ordersResponse.data.reduce(
            (sum, order) => sum + (order.totalAmount || 0),
            0
          )
        }

        // 获取发布商品统计
        const productsResponse = await productAPI.getMyProducts()
        if (productsResponse.code === 0 && Array.isArray(productsResponse.data)) {
          stats.productCount = productsResponse.data.length
        }

        // 获取收藏统计
        const favoritesResponse = await favoriteAPI.getMyFavorites()
        if (favoritesResponse.code === 0 && Array.isArray(favoritesResponse.data)) {
          stats.favoriteCount = favoritesResponse.data.length
        }

        // 获取社区统计
        await fetchCommunityStats()
      } catch (err) {
        console.error('获取统计数据失败:', err)
      }
    }

    // 获取社区统计数据
    const fetchCommunityStats = async () => {
      try {
        const userId = getCurrentUserId()
        if (!userId) return

        const response = await postAPI.getPostsByUser(userId, { page: 1, size: 1000 })
        if (response.code === 0 && response.data && response.data.posts) {
          const posts = response.data.posts
          stats.postCount = posts.length
          stats.postLikes = posts.reduce((sum, post) => sum + (post.likeCount || 0), 0)
          stats.postComments = posts.reduce((sum, post) => sum + (post.commentCount || 0), 0)
          stats.postViews = posts.reduce((sum, post) => sum + (post.viewCount || 0), 0)
        }
      } catch (err) {
        console.error('获取社区统计失败:', err)
      }
    }

    // 获取当前用户ID
    const getCurrentUserId = () => {
      try {
        const userInfoStr = localStorage.getItem('userInfo')
        if (userInfoStr) {
          const info = JSON.parse(userInfoStr)
          if (info && (info.userId || info.user_id)) {
            return info.userId || info.user_id
          }
        }
      } catch {}
      return null
    }

    // 获取最近订单
    const fetchRecentOrders = async () => {
      try {
        loadingOrders.value = true
        const response = await orderAPI.getMyOrders()
        if (response.code === 0 && Array.isArray(response.data)) {
          recentOrders.value = response.data.slice(0, 5)
        }
      } catch (err) {
        console.error('获取最近订单失败:', err)
      } finally {
        loadingOrders.value = false
      }
    }

    // 获取最近发表的帖子
    const fetchRecentPosts = async () => {
      try {
        loadingPosts.value = true
        const userId = getCurrentUserId()
        if (!userId) return

        const response = await postAPI.getPostsByUser(userId, { page: 1, size: 5 })
        if (response.code === 0 && response.data && response.data.posts) {
          recentPosts.value = response.data.posts
        }
      } catch (err) {
        console.error('获取最近帖子失败:', err)
      } finally {
        loadingPosts.value = false
      }
    }

    // 保存个人资料
    const handleSaveProfile = async () => {
      try {
        // 验证表单
        await editFormRef.value.validate()
        
        // 额外检查密码是否相同（避免表单验证异常）
        if (editForm.oldPassword && editForm.newPassword && editForm.oldPassword === editForm.newPassword) {
          ElMessage.warning('新密码不能与旧密码相同')
          return
        }
        
        saving.value = true

        // 更新昵称
        if (editForm.nickName && editForm.nickName !== userInfo.value.nickName) {
          console.log('更新昵称:', editForm.nickName)
          const updateResponse = await userAPI.updateNickname(editForm.nickName)
          console.log('昵称更新API响应:', updateResponse)
          console.log('昵称更新成功，触发全局更新事件')
          // 触发全局用户信息更新事件
          window.dispatchEvent(new CustomEvent('userInfoUpdated'))
        }

        // 修改密码
        if (editForm.oldPassword && editForm.newPassword) {
          // 验证新密码长度
          if (editForm.newPassword.length < 6) {
            ElMessage.error('新密码长度至少6位')
            return
          }
          
          try {
            const response = await userAPI.updatePassword(editForm.oldPassword, editForm.newPassword)
            if (response.code === 0) {
              ElMessage.success('密码修改成功，请重新登录')
              setTimeout(() => {
                localStorage.removeItem('token')
                localStorage.removeItem('authToken')
                localStorage.removeItem('userInfo')
                router.push('/userLogin')
              }, 1500)
              return
            } else {
              ElMessage.error(response.message || '密码修改失败')
              return
            }
          } catch (error) {
            console.error('密码修改失败:', error)
            ElMessage.error('密码修改失败，请检查旧密码是否正确')
            return
          }
        }

        ElMessage.success('资料更新成功')
        showEditDialog.value = false
        await fetchUserInfo()
      } catch (err) {
        console.error('保存资料失败:', err)
        ElMessage.error('保存失败，请重试')
      } finally {
        saving.value = false
      }
    }

    // 跳转页面
    const navigateTo = (path) => {
      router.push(path)
    }

    // 查看订单详情
    const viewOrderDetail = (orderId) => {
      router.push(`/gear/order/${orderId}`)
    }

    // 查看帖子详情
    const viewPost = (postId) => {
      router.push(`/community/post/${postId}`)
    }

    // 获取分类名称
    const getCategoryName = (category) => {
      const map = {
        fishing: '钓鱼经验',
        help: '求助问答',
        tips: '技巧分享',
        general: '综合讨论'
      }
      return map[category] || '其他'
    }

    // 获取分类类型
    const getCategoryType = (category) => {
      const typeMap = {
        fishing: 'success',
        help: 'warning',
        tips: 'info',
        general: ''
      }
      return typeMap[category] || ''
    }

    // 获取订单图片
    const getOrderImage = (order) => {
      if (order.coverList) {
        // 如果coverList是字符串
        if (typeof order.coverList === 'string') {
          // 如果是URL字符串，直接返回
          if (order.coverList.startsWith('http')) {
            return order.coverList
          }
          // 如果是JSON字符串，尝试解析
          try {
            const coverList = JSON.parse(order.coverList)
            return Array.isArray(coverList) && coverList.length > 0 ? coverList[0] : null
          } catch (error) {
            console.warn('解析coverList失败:', error)
            return null
          }
        }
        // 如果coverList是数组
        if (Array.isArray(order.coverList)) {
          return order.coverList[0] || null
        }
      }
      return ''
    }

    // 获取订单状态文本
    const getStatusText = (status) => {
      const statusMap = {
        'pending': '待付款',
        'paid': '已付款',
        'shipped': '已发货',
        'delivered': '已完成',
        'cancelled': '已取消'
      }
      return statusMap[status] || '未知'
    }

    // 获取订单状态类型
    const getStatusType = (status) => {
      const typeMap = {
        'pending': 'warning',
        'paid': 'info',
        'shipped': 'primary',
        'delivered': 'success',
        'cancelled': 'danger'
      }
      return typeMap[status] || 'info'
    }

    // 格式化日期
    const formatDate = (dateString) => {
      if (!dateString) return '未知'
      const date = new Date(dateString)
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      })
    }

    // 页面加载时获取数据
    onMounted(() => {
      fetchUserInfo()
      fetchStats()
      fetchRecentOrders()
      fetchRecentPosts()
    })

    return {
      userInfo,
      stats,
      recentOrders,
      loadingOrders,
      recentPosts,
      loadingPosts,
      showEditDialog,
      saving,
      editFormRef,
      editForm,
      editRules,
      quickLinks,
      handleSaveProfile,
      navigateTo,
      viewOrderDetail,
      getOrderImage,
      getStatusText,
      getStatusType,
      formatDate,
      fetchRecentPosts,
      viewPost,
      getCategoryName,
      getCategoryType
    }
  }
}
</script>

<style scoped lang="scss">
$primary-color: #409eff;
$success-color: #67c23a;
$warning-color: #ff9900;
$danger-color: #f56c6c;
$gray-light: #f5f7fa;
$gray-mid: #e5e6eb;
$text-main: #303133;
$text-secondary: #909399;

.user-center-page {
  width: 100%;
  min-height: calc(100vh - 120px);
  padding: 20px;
  background-color: $gray-light;
}

// 用户信息卡片
.user-info-card {
  margin-bottom: 20px;
  border-radius: 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;

  :deep(.el-card__body) {
    padding: 30px;
  }

  .user-header {
    display: flex;
    align-items: center;
    gap: 25px;

    @media (max-width: 768px) {
      flex-direction: column;
      text-align: center;
    }

    .avatar-section {
      .user-avatar {
        background: rgba(255, 255, 255, 0.2);
        border: 4px solid rgba(255, 255, 255, 0.5);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
        color: #fff;
      }
    }

    .user-details {
      flex: 1;

      .user-name {
        font-size: 28px;
        color: #fff;
        margin: 0 0 10px 0;
        font-weight: 700;
      }

      .user-id {
        font-size: 15px;
        color: rgba(255, 255, 255, 0.9);
        margin: 8px 0;
        display: flex;
        align-items: center;
        gap: 8px;

        @media (max-width: 768px) {
          justify-content: center;
        }
      }

      .join-time {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.8);
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;

        @media (max-width: 768px) {
          justify-content: center;
        }
      }
    }

    .el-button {
      background: rgba(255, 255, 255, 0.95);
      color: #667eea;
      border: none;
      font-weight: 600;

      &:hover {
        background: #fff;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }
    }
  }
}

// 统计数据
.stats-section {
  margin-bottom: 20px;

  .stat-card {
    border-radius: 12px;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid transparent;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
      border-color: rgba(64, 158, 255, 0.3);
    }

    .stat-content {
      display: flex;
      align-items: center;
      gap: 15px;
      padding: 15px 5px;

      .stat-icon {
        font-size: 48px;
        opacity: 0.9;
      }

      .stat-info {
        flex: 1;

        .stat-value {
          font-size: 28px;
          font-weight: 700;
          color: $text-main;
          margin: 0 0 5px 0;
        }

        .stat-label {
          font-size: 14px;
          color: $text-secondary;
          margin: 0;
        }
      }
    }
  }
}

// 快捷入口
.quick-links-card {
  margin-bottom: 20px;
  border-radius: 12px;

  .card-header {
    h3 {
      font-size: 20px;
      color: $text-main;
      margin: 0;
      font-weight: 700;
    }
  }

  .quick-link-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 25px 15px;
    border-radius: 12px;
    background: linear-gradient(135deg, #f5f7fa 0%, #fff 100%);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;

    &:hover {
      background: linear-gradient(135deg, #e8f4ff 0%, #f0f9ff 100%);
      transform: translateY(-5px);
      border-color: rgba(64, 158, 255, 0.3);
      box-shadow: 0 8px 16px rgba(64, 158, 255, 0.15);
    }

    .link-label {
      font-size: 15px;
      color: $text-main;
      margin-top: 12px;
      margin-bottom: 0;
      font-weight: 500;
    }
  }
}

// 最近订单
.recent-orders-card {
  border-radius: 12px;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    h3 {
      font-size: 20px;
      color: $text-main;
      margin: 0;
      font-weight: 700;
    }
  }

  .loading-container {
    padding: 20px 0;
  }

  .orders-list {
    .order-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 18px;
      border-radius: 12px;
      background: linear-gradient(135deg, #f5f7fa 0%, #fff 100%);
      margin-bottom: 12px;
      cursor: pointer;
      transition: all 0.3s ease;
      border: 2px solid transparent;

      &:hover {
        background: linear-gradient(135deg, #e8f4ff 0%, #f0f9ff 100%);
        transform: translateX(8px);
        border-color: rgba(64, 158, 255, 0.3);
        box-shadow: 0 6px 12px rgba(64, 158, 255, 0.1);
      }

      .order-info {
        display: flex;
        align-items: center;
        gap: 15px;
        flex: 1;

        .order-img {
          width: 70px;
          height: 70px;
          border-radius: 8px;
          overflow: hidden;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .order-details {
          flex: 1;
          min-width: 0;

          .order-title {
            font-size: 16px;
            color: $text-main;
            margin: 0 0 5px 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-weight: 600;
          }

          .order-no,
          .order-time {
            font-size: 13px;
            color: $text-secondary;
            margin: 3px 0;
          }
        }
      }

      .order-status {
        text-align: right;

        .order-price {
          font-size: 18px;
          color: $danger-color;
          font-weight: 700;
          margin-top: 8px;
          margin-bottom: 0;
        }
      }
    }
  }
}

// 最近发表的帖子
.recent-posts-card {
  border-radius: 12px;
  margin-top: 20px;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    h3 {
      font-size: 20px;
      color: $text-main;
      margin: 0;
      font-weight: 700;
    }
  }

  .loading-container {
    padding: 20px 0;
  }

  .posts-list {
    .post-item {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding: 18px;
      border-radius: 12px;
      background: linear-gradient(135deg, #f5f7fa 0%, #fff 100%);
      margin-bottom: 12px;
      cursor: pointer;
      transition: all 0.3s ease;
      border: 2px solid transparent;

      &:hover {
        background: linear-gradient(135deg, #e8f4ff 0%, #f0f9ff 100%);
        transform: translateX(8px);
        border-color: rgba(64, 158, 255, 0.3);
        box-shadow: 0 6px 12px rgba(64, 158, 255, 0.1);
      }

      .post-info {
        flex: 1;
        min-width: 0;

        .post-title {
          font-size: 16px;
          color: $text-main;
          margin: 0 0 8px 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-weight: 600;
        }

        .post-content {
          font-size: 14px;
          color: $text-secondary;
          margin: 0 0 10px 0;
          line-height: 1.5;
        }

        .post-meta {
          display: flex;
          align-items: center;
          gap: 10px;

          .post-time {
            font-size: 12px;
            color: $text-secondary;
          }
        }
      }

      .post-stats {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: flex-end;

        .stat-item {
          display: flex;
          align-items: center;
          gap: 4px;
          font-size: 12px;
          color: $text-secondary;

          .el-icon {
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>

